<template>
  <view class="settings">
    <!-- 设置列表 -->
    <view class="settings-list">
      <!-- 账号设置 -->
      <view class="settings-group">
        <view class="group-title">账号设置</view>
        <view class="setting-item" @click="navigateTo('/pages/profile/profile')">
          <text class="label">个人资料</text>
          <view class="right">
            <uni-icons type="right" size="16" color="#999" />
          </view>
        </view>
        <view class="setting-item" @click="navigateTo('/pages/security/security')">
          <text class="label">账号安全</text>
          <view class="right">
            <uni-icons type="right" size="16" color="#999" />
          </view>
        </view>
      </view>

      <!-- 通知设置 -->
      <view class="settings-group">
        <view class="group-title">通知设置</view>
        <view class="settings-list">
          <view class="settings-item">
            <text>系统通知</text>
            <switch :checked="settings.systemNotification" @change="updateSetting('systemNotification', $event)" color="#5cb85c" />
          </view>
          <view class="settings-item">
            <text>活动通知</text>
            <switch :checked="settings.activityNotification" @change="updateSetting('activityNotification', $event)" color="#5cb85c" />
          </view>
          <view class="settings-item">
            <text>养护提醒</text>
            <switch :checked="settings.careNotification" @change="updateSetting('careNotification', $event)" color="#5cb85c" />
          </view>
        </view>
      </view>

      <!-- 隐私设置 -->
      <view class="settings-group">
        <view class="group-title">隐私设置</view>
        <view class="settings-list">
          <view class="settings-item">
            <text>宠物信息公开</text>
            <switch :checked="settings.petInfoPublic" @change="updateSetting('petInfoPublic', $event)" color="#5cb85c" />
          </view>
          <view class="settings-item">
            <text>位置服务</text>
            <switch :checked="settings.locationEnabled" @change="updateSetting('locationEnabled', $event)" color="#5cb85c" />
          </view>
        </view>
      </view>

      <!-- 其他选项 -->
      <view class="settings-group">
        <view class="group-title">其他</view>
        <view class="settings-list">
          <view class="settings-item link" @click="clearCache">
            <text>清除缓存</text>
            <view class="right-content">
              <text class="cache-size">{{cacheSize}}</text>
              <uni-icons type="right" size="16" color="#999" />
            </view>
          </view>
          <view class="settings-item link" @click="checkUpdate">
            <text>检查更新</text>
            <view class="right-content">
              <text class="version">v{{version}}</text>
              <uni-icons type="right" size="16" color="#999" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="handleLogout">
      退出登录
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      settings: {
        systemNotification: true,
        activityNotification: true,
        careNotification: true,
        petInfoPublic: false,
        locationEnabled: true
      },
      cacheSize: '0MB',
      version: '1.0.0'
    }
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({ url })
    },
    async updateSetting(key, event) {
      const value = event.detail.value
      try {
        const res = await uniCloud.callFunction({
          name: 'updateSettings',
          data: {
            key,
            value
          }
        })
        if (res.result.code === 200) {
          this.settings[key] = value
        } else {
          // 更新失败，恢复原值
          this.settings[key] = !value
          uni.showToast({
            title: '设置失败',
            icon: 'none'
          })
        }
      } catch (error) {
        // 发生错误，恢复原值
        this.settings[key] = !value
        uni.showToast({
          title: '设置失败',
          icon: 'none'
        })
      }
    },
    async loadSettings() {
      try {
        const res = await uniCloud.callFunction({
          name: 'getSettings',
          data: {}
        })
        if (res.result.code === 200) {
          this.settings = { ...this.settings, ...res.result.data }
        }
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    async clearCache() {
      try {
        await uni.showLoading({
          title: '清理中...',
          mask: true
        })
        // 这里添加清除缓存的具体逻辑
        setTimeout(() => {
          this.cacheSize = '0MB'
          uni.hideLoading()
          uni.showToast({
            title: '清理完成',
            icon: 'success'
          })
        }, 1000)
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '清理失败',
          icon: 'none'
        })
      }
    },
    checkUpdate() {
      uni.showToast({
        title: '已是最新版本',
        icon: 'none'
      })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // TODO: 实现退出登录逻辑
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }
        }
      })
    }
  },
  onShow() {
    this.loadSettings()
  }
}
</script>

<style lang="scss">
.settings {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: env(safe-area-inset-bottom);
}

.settings-list {
  padding: 20rpx;

  .settings-group {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;

    .group-title {
      padding: 20rpx;
      font-size: 28rpx;
      color: #999;
    }

    .settings-list {
      .settings-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 20rpx;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        text {
          font-size: 30rpx;
          color: #333;
        }

        &.link {
          .right-content {
            display: flex;
            align-items: center;
            gap: 8rpx;

            .cache-size,
            .version {
              font-size: 28rpx;
              color: #999;
            }
          }
        }
      }
    }
  }
}

.logout-btn {
  margin: 40rpx 20rpx;
  background: #fff;
  color: #ff4d4f;
  text-align: center;
  padding: 30rpx;
  border-radius: 16rpx;
  font-size: 32rpx;

  &:active {
    opacity: 0.8;
  }
}
</style> 